<template>
  <div>
    <div class="app">
      <!-- 头部 -->
      <div class="header">
        <div class="logo">
          <img src="../../public/assets/images-index/1.png" alt="" />
        </div>
        <div class="header-tools">
          <div><span class="ht-btn1" @click="Jump_search"></span></div>
          <div class="header-tools1">
            <span class="ht-btn2" @click="falgs"></span>
            <div class="header-tools1-1" v-show="falg">
              <div @click="Jump_book">
                <span class="span1-1"></span><span>书架</span>
              </div>
              <div @click="Jump_my">
                <span class="span1-2"></span><span>我的</span>
              </div>
            </div>
          </div>
          <div><span class="ht-btn3"></span></div>
        </div>
      </div>
      <!-- nav导航 -->
      <div class="nav">
        <div class="nav-1 nav-2" @click="Jump_new">更新</div>
        <div class="nav-1" @click="Jump_top">排行</div>
      </div>
      <!-- 轮播图片 -->
      <div class="register">
        <!-- <van-swipe class="my-swipe" :autoplay="3000" > -->
        <van-swipe
          style="height: 200px"
          vertical
          :autoplay="3000"
          indicator-color="white"
        >
          <van-swipe-item
            v-for="item in splist"
            :key="item.comic_id"
            @click="Jump_pre(item.comic_id, item.comic_name)"
          >
            <img :src="item.pic" alt="" class="spimgs" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 墙裂推荐 -->
      <div class="recommend-content">
        <div class="recommend-title">
          <img src="../../public/assets/images-index/3.png" alt="" />
        </div>
        <ul class="comic-list">
          <li
            v-for="item in recommendlist"
            :key="item.comic_id"
            @click="Jump_pre(item.comic_id, item.comic_name)"
          >
            <img :src="item.imgurl" alt="" />
            <span>{{ item.comic_name }}</span>
          </li>
        </ul>
      </div>
      <!-- 人气作品 -->
      <div class="zp-content" ref="obtain">
        <div class="zp-title-str">
          <span class="text">人气作品</span>
          <span
            class="zp-title-str1"
            @click="Jump_More((name = '人气作品'), (type = 'dark'))"
            >更多<span class="iconfont icft">&#xe88e;</span></span
          >
        </div>
        <ul class="comic-list-other">
          <li
            v-for="item in popularitylist"
            :key="item.comic_id"
            @click="Jump_pre(item.comic_id, item.comic_name)"
          >
            <img :src="item.imgurl" alt="" />
            <span>{{ item.comic_name }}</span>
          </li>
        </ul>
      </div>
      <!-- 精品推荐 -->

      <div class="zp-content">
        <div class="zp-title-str">
          <span class="text">精品推荐</span>
          <span
            class="zp-title-str1"
            @click="Jump_More((name = '精品推荐'), (type = 'self'))"
            >更多<span class="iconfont icft">&#xe88e;</span></span
          >
        </div>
        <ul class="comic-list-other">
          <li
            v-for="item in Boutiquelist"
            :key="item.comic_id"
            @click="Jump_pre(item.comic_id, item.comic_name)"
          >
            <img :src="item.imgurl" alt="" />
            <span>{{ item.comic_name }}</span>
          </li>
        </ul>
      </div>
      <!-- 热力点击 -->
      <div class="zp-content">
        <div class="zp-title-str">
          <span class="text">热力点击</span>
          <span
            class="zp-title-str1"
            @click="Jump_More((name = '热力点击'), (type = 'girl'))"
            >更多<span class="iconfont icft">&#xe88e;</span></span
          >
        </div>
        <div class="reli-list-s">
          <div
            class="reli-list"
            v-for="item in heatlist"
            :key="item.comic_id"
            @click="Jump_pre(item.comic_id, item.comic_name)"
          >
            <div class="reli-list1">
              <img :src="item.imgurl" alt="" />
            </div>
            <div class="reli-list2">
              <div class="list2-1">{{ item.comic_name }}</div>
              <div class="list2-2">
                <span v-for="ele in item.cartoon_type_list" :key="ele.id"
                  >{{ ele.name }}&nbsp;</span
                >
              </div>
              <div class="list2-3">
                <span>{{ item.author_name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 今日推荐 -->
      <div class="zp-content">
        <div class="zp-title-str">
          <span class="text">今日推荐</span>
        </div>
        <div class="recommendComic-s">
          <div
            class="recommendComic"
            v-for="item in todaylist"
            :key="item.comic_id"
            @click="Jump_pre(item.comic_id, item.comic_name)"
          >
            <div class="recommendComic-1">
              <img :src="item.imgurl" alt="" />
            </div>
            <div class="recommendComic-2">
              <div class="recommendComic-2-1">
                <span>{{ item.comic_name }} /</span>
                <span class="spantext">{{ item.author_name }}</span>
              </div>
              <div class="recommendComic-2-2">
                <span v-for="ele in item.cartoon_type_list" :key="ele.id"
                  >{{ ele.name }}&nbsp;|</span
                >
              </div>
              <div class="recommendComic-2-3">{{ item.comic_feature }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 完结漫画 -->
      <div class="zp-content">
        <div class="zp-title-str">
          <span class="text">完结漫画</span>
          <span
            class="zp-title-str1"
            @click="Jump_More((name = '完结漫画'), (type = 'finish'))"
            >更多<span class="iconfont icft">&#xe88e;</span></span
          >
        </div>
        <ul class="comic-list-other">
          <li
            v-for="item in endlist"
            :key="item.comic_id"
            @click="Jump_pre(item.comic_id, item.comic_name)"
          >
            <img :src="item.imgurl" alt="" />
            <span>{{ item.comic_name }}</span>
          </li>
        </ul>
      </div>
      <!-- 全彩漫画 -->
      <div class="zp-content">
        <div class="zp-title-str">
          <span class="text">全彩漫画</span>
          <span
            class="zp-title-str1"
            @click="Jump_More((name = '全彩漫画'), (type = 'free'))"
            >更多<span class="iconfont icft">&#xe88e;</span></span
          >
        </div>
        <ul class="comic-list-other">
          <li
            v-for="item in Fulllist"
            :key="item.comic_id"
            @click="Jump_pre(item.comic_id, item.comic_name)"
          >
            <img :src="item.imgurl" alt="" />
            <span>{{ item.comic_name }}</span>
          </li>
        </ul>
      </div>
      <!-- 尾部 -->
      <footer>
        <div>成为作者</div>
        <div>意见反馈</div>
        <div>电脑版</div>
      </footer>
      <!-- 返回顶部模块 -->
      <span class="back-top" @click="getscroll" v-show="isdp"></span>
      <!-- 尾部广告模块 -->
      <div class="register-download"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      falg: false, //显示隐藏
      recommendlist: "", //推荐
      popularitylist: "", //人气
      Boutiquelist: "", //精品
      heatlist: "",//热力
      todaylist: "",//今日推荐
      endlist: "",//完结
      Fulllist: "",//全彩
      isdp: false,
      splist: [
        {
          pic: require("../../public/assets/images-index/sp4.png"),
          comic_id: 107490,
          comic_name: "神武天尊",
        },

        {
          pic: require("../../public/assets/images-index/sp2.png"),
          comic_id: 107414,
          comic_name: "专属恋人",
        },
        {
          pic: require("../../public/assets/images-index/sp3.png"),
          comic_id: 106518,
          comic_name: "逆天邪神",
        },
        {
          pic: require("../../public/assets/images-index/sp1.png"),
          comic_id: 107682,
          comic_name: "仙武帝尊",
        },
      ],
    };
  },
  created() {
    this.getrecommend();
    this.getpopularity();
    this.getBoutique();
    this.getheat();
    this.gettoday();
    this.getend();
    this.getFull();
    this.getaxios()
  },
  mounted() {
    window.onscroll = () => {
      if (this.$refs.obtain.getBoundingClientRect().top < 650) {
        this.isdp = true;
      } else {
        this.isdp = false;
      }
    };
  },
  beforeDestroy() {
    window.onscroll = null;
  },
  methods: {
    //跳转更新榜
    Jump_new() {
      this.$router.push({ name: "new" });
    },
    //跳转排行榜
    Jump_top() {
      this.$router.push({ name: "top" });
    },
    //跳转搜索
    Jump_search() {
      this.$router.push({ name: "search" });
    },
    //跳转更多
    Jump_More(name, type) {
      this.$router.push({ name: "more" });
      this.$emit("getname", name);
      this.$emit("gettype", type);
    },
    //跳转详情
    Jump_pre(id, name) {
      this.$emit("getid", id);
      this.$router.push({ name: "pre" });
      this.$emit("getcomicname", name);
    },
    //跳转书架
    Jump_book() {
      this.$router.push({ name: "book" });
    },
    //跳转我的
    Jump_my() {
      this.$router.push({ name: "my" });
    },
    getscroll() {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },

    //切换显示隐藏
    falgs() {
      this.falg = !this.falg;
    },
    // 推荐
    getrecommend() {
      this.$axios({
        url: `https://www.kanman.com/api/getRankDataForWeb?isalldata=0&time_type=week&sort_type=all&rank_type=heat&page=1&pageSize=6`,
        method: "get",
      }).then((data) => {
        this.recommendlist = data.data.data.list;
        this.recommendlist.forEach((item) => {
          this.$set(
            item,
            "imgurl",
            `https://image.yqmh.com/mh/${item.comic_id}.jpg`
          );
        });
      });
    },
    //人气
    getpopularity() {
      this.$axios({
        url: `https://www.kanman.com/api/getRankDataForWeb?isalldata=0&time_type=week&sort_type=dark&rank_type=heat&page=1&pageSize=6`,
        method: "get",
      }).then((data) => {
        this.popularitylist = data.data.data.list;
        this.popularitylist.forEach((item) => {
          this.$set(
            item,
            "imgurl",
            `https://image.yqmh.com/mh/${item.comic_id}.jpg`
          );
        });
      });
    },
    //精品
    getBoutique() {
      this.$axios({
        url: `https://www.kanman.com/api/getRankDataForWeb?isalldata=0&time_type=week&sort_type=self&rank_type=heat&page=1&pageSize=3`,
        method: "get",
      }).then((data) => {
        this.Boutiquelist = data.data.data.list;
        this.Boutiquelist.forEach((item) => {
          this.$set(
            item,
            "imgurl",
            `https://image.yqmh.com/mh/${item.comic_id}.jpg`
          );
        });
      });
    },
    //热力点击
    getheat() {
      this.$axios({
        url: `https://www.kanman.com/api/getRankDataForWeb?isalldata=0&time_type=week&sort_type=girl&rank_type=heat&page=1&pageSize=3`,
        method: "get",
      }).then((data) => {
        this.heatlist = data.data.data.list;
        this.heatlist.forEach((item) => {
          this.$set(
            item,
            "imgurl",
            `https://image.yqmh.com/mh/${item.comic_id}.jpg`
          );
        });
      });
    },
    //今日
    gettoday() {
      this.$axios({
        url: `https://www.kanman.com/api/getRankDataForWeb?isalldata=0&time_type=week&sort_type=charge&rank_type=heat&page=1&pageSize=1`,
        method: "get",
      }).then((data) => {
        console.log(data.data.data.list);
        this.todaylist = data.data.data.list;
        this.todaylist.forEach((item) => {
          this.$set(
            item,
            "imgurl",
            `https://image.yqmh.com/mh/${item.comic_id}.jpg`
          );
        });
      });
    },
    //完结
    getend() {
      this.$axios({
        url: `https://www.kanman.com/api/getRankDataForWeb?isalldata=0&time_type=week&sort_type=finish&rank_type=heat&page=1&pageSize=3`,
        method: "get",
      }).then((data) => {
        // console.log(data.data.data.list);
        this.endlist = data.data.data.list;
        this.endlist.forEach((item) => {
          this.$set(
            item,
            "imgurl",
            `https://image.yqmh.com/mh/${item.comic_id}.jpg`
          );
        });
      });
    },
    //全彩
    getFull() {
      this.$axios({
        url: `https://www.kanman.com/api/getRankDataForWeb?isalldata=0&time_type=week&sort_type=free&rank_type=heat&page=1&pageSize=3`,
        method: "get",
      }).then((data) => {
        console.log(data.data.data.list);
        this.Fulllist = data.data.data.list;
        this.Fulllist.forEach((item) => {
          this.$set(
            item,
            "imgurl",
            `https://image.yqmh.com/mh/${item.comic_id}.jpg`
          );
        });
      });
    },
    getaxios(){
      this.$axios({
        url:'/api/main/index?batch=682&versionCode=378&system_name=android&channel=vivo',
        method:'get'
      }).then(data=>{
        console.log('数据',data);
      })
    }
  },
};
</script>

<style scoped>
.app {
  background-color: rgb(242, 242, 242);
}

/* 头部 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 53px;
  background-color: #fff;
  padding: 13px 13px 0 13px;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid #b3b3b3;
  z-index: 999;
}
.logo {
  width: 66px;
  height: 26.5px;
  margin-right: 145px;
}
.logo > img {
  width: 100%;
  height: 100%;
}
.header-tools {
  width: 40%;
  display: flex;
}
.header-tools > div {
  width: 33%;
}
.header-tools > div > span {
  margin-left: 15px;
}
.header-tools1 {
  position: relative;
}
/* 显示隐藏 */
.header-tools1-1 {
  position: absolute;
  top: 29px;
  left: -15px;
  width: 87.5px;
  height: 104.5px;
  padding: 10px 2.5px 0 2.5px;
  background: url(../../public/assets/images-index/slide.png);
  background-size: 100% 100%;
}
.header-tools1-1 > div {
  line-height: 49.9px;
  margin: 0 12px;
  height: 49.9px;
  font-size: 14px;
  color: #666;
}
.header-tools1-1 > div:nth-child(1) {
  border-bottom: 1px solid rgb(220, 220, 220);
}
.span1-1,
.span1-2 {
  position: relative;
  width: 25px;
  height: 24px;
  display: inline-block;
  background-image: url(../../public/assets/images-index/book.png);
  top: 6px;

  background-size: 100% 100%;
}
.span1-2 {
  background-image: url(../../public/assets/images-index/my.png);
  top: 6px;

  background-size: 100% 100%;
}
.ht-btn1 {
  width: 26px;
  height: 26px;
  display: block;
  background-image: url(../../public/assets/images-index/search.png);
  background-size: 100% 100%;
}
.ht-btn2 {
  width: 26px;
  height: 26px;
  display: block;
  background-image: url(../../public/assets/images-index/zjd.png);
  background-size: 100% 100%;
}
.ht-btn3 {
  width: 26px;
  height: 26px;
  display: block;
  background-image: url(../../public/assets/images-index/wd.png);
  background-size: 100% 100%;
}
/* nav导航 */
.nav {
  width: 100%;
  height: 45px;
  display: flex;
  background-color: #fff;
  margin-top: 53px;
}
.nav > div {
  position: relative;
  width: 50%;
  text-align: center;
  line-height: 45px;
}
.nav-1::after {
  position: absolute;
  top: 13px;
  left: 55px;
  content: "";
  display: block;
  width: 20px;
  height: 18px;
  background: url(../../public/assets/images-index/sprite2.png);
  background-position: 0px -69px;
  background-size: 185.5px 43.5px;
}
.nav-2::before {
  position: absolute;
  content: "";
  display: block;
  width: 1px;
  height: 30px;
  background-color: rgb(220, 220, 220);
  top: 50%;
  transform: translate(0, -50%);
  left: 100%;
}
.nav-2::after {
  background-position: -25px -69px;
}
/* 图片 */
.register {
  width: 100%;
  height: 160px;
  padding: 15px 0px 10px 0px;
  margin-top: -10px;
  margin-bottom: 5px;
  overflow: hidden;
}
.spimgs {
  width: 100%;
  height: 100%;
}
.my-swipe .van-swipe-item {
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 20px;
  /* line-height: 150px; */
  text-align: center;
  background-color: #39a9ed;
}
/* 墙裂推荐 */
.recommend-content {
  /* margin-top: 50px; */
  width: 100%;
  border-bottom: 18.8px solid #f2f2f2;
  background-color: #fff;
}
.recommend-title {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  width: 100%;
  background-color: rgb(73, 221, 161);
}
.recommend-title > img {
  position: relative;
  width: 125px;
  height: 25px;
  left: 50%;
  transform: translate(-50%, 0);
  margin-top: 11.5px;
}
.comic-list {
  padding: 0 13px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 13px;
}
.comic-list li {
  width: 108px;
  height: 165px;
  margin-bottom: 14px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  overflow: hidden;
}
.comic-list li img {
  display: block;
  width: 100%;
  height: 137px;
}
.comic-list li span {
  display: block;
  width: 100%;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: 14px;
}

/* 人气作品，精彩推荐，热力点击，今日推荐，完结漫画，全彩漫画公共模块 */
.zp-content {
  width: 100%;
  background-color: #fff;
  border-bottom: 10px solid #f2f2f2;
}
.zp-title-str {
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  position: relative;
}
.zp-title-str1 {
  display: block;
  position: absolute;
  top: 0px;
  left: 330px;
  font-size: 12px;
  color: rgb(187, 187, 187);
}
.icft {
  position: relative;
  margin-left: -6px;
  top: 2px;
}
.text {
  font-weight: 800;
}
/* 人气作品，精彩推荐公共模块 */
.comic-list-other {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 13px;
}
.comic-list-other li {
  width: 108px;
  height: 165px;
  margin-bottom: 14px;
}
.comic-list-other li img {
  display: block;
  width: 100%;
  height: 137px;
}
.comic-list-other li span {
  display: block;
  width: 100%;
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
/* 热力点击单独模块 */
.reli-list {
  box-sizing: border-box;
  width: 100%;
  height: 112.5px;
  padding: 0px 12.6px 9.4px 12.6px;
  display: flex;
}
.reli-list > div {
  width: 50%;
  height: 100%;
}
.reli-list1 img {
  width: 100%;
  height: 100%;
}
.reli-list2 {
  box-sizing: border-box;
  background-color: rgb(242, 242, 242);
  padding: 9px 0 0 32.5px;
}
.reli-list2 .list2-1 {
  width: 100%;
  height: 28.9px;
  font-size: 13px;
  color: #333;
}
.reli-list2 .list2-2 {
  width: 100%;
  height: 22px;
  color: #999;
  font-size: 12px;
}
.reli-list2 .list2-3 {
  color: #999;
  font-size: 12px;
}
/* 今日推荐单独模块 */
.recommendComic {
  box-sizing: border-box;
  width: 100%;
  height: 151.5px;
  padding: 0px 12px 15px 12px;
  display: flex;
}
.recommendComic-1 {
  width: 31%;
  height: 100%;
}
.recommendComic-1 img {
  width: 100%;
  height: 100%;
}
.recommendComic-2 {
  width: 228px;
  height: 117.7px;
  margin-left: 10px;
}
.recommendComic-2-1 {
  margin-top: 15px;
  width: 100%;
  height: 39px;
  font-size: 15px;
  color: #444;
}
.recommendComic-2-1 .spantext {
  font-size: 12px;
}
.recommendComic-2-2 {
  width: 100%;
  height: 34px;
  color: #999;
  font-size: 13px;
}
.recommendComic-2-3 {
  margin-top: 6.7px;
  width: 100%;
  height: 23px;
  color: #999;
  font-size: 12px;
}
/* 尾部 */
footer {
  box-sizing: border-box;
  width: 100%;
  height: 127.7px;
  display: flex;
  padding: 0 50px;
}
footer > div {
  width: 33%;
  text-align: center;
  font-size: 15px;
  color: #b3b3b3;
  line-height: 66px;
  height: 66px;
}
/* 返回顶部模块 */
.back-top {
  position: fixed;
  right: 10px;
  bottom: 80px;
  width: 35px;
  height: 60px;
  background: url(../../public/assets/images-index/foot1.png);
  background-size: 100% 100%;
}
/* 尾部广告模块 */
.register-download {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 86.2px;
  background: url(../../public/assets/images-index/foot.png);
  background-size: 100% 100%;
}
</style>